Device Pixel Ratio

物理ピクセル (device pixel)と論理ピクセル (CSS pixel) の比率

window.devicePixelRatio (dpr) で得られる値

CSSでの1pxを、デバイスピクセル使って表現しているか？という値

https://gyazo.com/78e5f93bd57555ba27784e4e4b4e3678 https://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays

Retinaディスプレイは上図の中央 (dpr=2) になっている

CSSで1pxで指定すると、実際には4pxを使って表示される

見た目的に大きさの差異はない #??

きめ細やかになる

関係

以前はdevice pixelとCSS pixelは一致していた

しかし、Retinaに始まり違う数のも出てきたので分けて考える必要が出てきた

何が嬉しくてdpr=2にした？

これはCSSが1pxが定義されたよりも、あとにdpr=2できる技術ができたからこんなことになった？

CSSを実装時に何を気をつければいい？

next/legacy/imageではどのサイズを指定すればいい？

どうやって調べる？

その画像がある時に、どこを見ればCSS pixelがわかる？

device pixelかDevice Pixel RatioはJSで取ってこれる？

Retina環境でウェブページのキャプチャを撮ると画像サイズが縦横2倍になる

https://gyazo.com/43ce5445d2d02100f0f34f9d53077b9b https://scrapbox.io/daiiz/Device_Pixel_Ratio

なんでこれ？mrsekut.icon

キャプチャの表示がややこしすぎない？